<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .scroll__table__body {
        color: rgba(0, 0, 0, 0.65);
        width: calc(100vw);
        height: calc(100vh - 330px);
        overflow-x: scroll;
        position: relative;
      }

      .scroll__table__body__row {
        display: flex;
      }

      .scroll__table__body__row__item {
        flex-shrink: 0;
        min-height: 44px;
        padding: 15px;
        display: flex;
        line-height: 22px;
        align-items: center;
        word-break: break-all;
        cursor: pointer;
        border-bottom: 1px solid #e8e8e8;
      }
    </style>
  </head>
  <body>
    <div id="header" class="scroll__table__body__row"></div>
    <div id="init-table-body" class="scroll__table__body"></div>
    <div id="number"></div>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      const data = {
        //   表头
        flowHeader: [
          {
            cell: "交易时间",
          },
          {
            cell: "账号",
          },
          {
            cell: "储种",
          },
          {
            cell: "序号",
          },
          {
            cell: "币种",
          },
          {
            cell: "钞汇",
          },
          {
            cell: "摘要",
          },
          {
            cell: "地区",
          },
          {
            cell: "收入/支出金额",
          },
          {
            cell: "余额",
          },
          {
            cell: "渠道",
          },
        ],
        //    表格内容
        flowData: [
          {
            交易时间: "2002-09-01",
            账号: "11100002123",
            储种: "活期",
            序号: "1",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区111",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 0,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 0,
            _rowNum: 1,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 1,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 1,
            _rowNum: 1,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 1,
            _rowNum: 2,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
          {
            交易时间: "2102-09-01",
            账号: "111000102123",
            储种: "活期1",
            序号: "12",
            币种: "人民币",
            钞汇: "钞",
            摘要: "消费",
            地区: "地区222",
            "收入/支出金额": "1000.01",
            余额: "800.01",
            渠道: "快捷支付",
            _pageNum: 2,
            _rowNum: 0,
          },
        ],
    };
    let headerhtml="";
    data.flowHeader.forEach(item=>{
        headerhtml+=`<div class="scroll__table__body__row__item" style="width: 66px; background: rgb(255, 255, 255)">${item.cell}</div>`
    })
    document.getElementById("header").innerHTML=headerhtml;
    let tablehtml="";
    data.flowData.forEach(item=>{
        tablehtml+=`<div class="scroll__table__body__row pagerow${item._pageNum}">`
        data.flowHeader.forEach(i=>{
            tablehtml+=`<div class="scroll__table__body__row__item" style="width: 66px; background: rgb(255, 255, 255)">${item[i.cell]}</div>`
        })
        tablehtml+=`</div>`
    })
    document.getElementById("init-table-body").innerHTML=tablehtml;
    function computedStyle(){
        const firstClassPageNum=$("#init-table-body").children(".scroll__table__body__row:first-child")
        .attr("class").split(" ")[1].replace("pagerow", "")
        const lastClassPageNum=$("#init-table-body").children(".scroll__table__body__row:last-child")
        .attr("class").split(" ")[1].replace("pagerow","")
        //console.log(firstClassPageNum,lastClassPageNum)
        let initTopList=[];
        for(let index=firstClassPageNum;index<Number(lastClassPageNum)+1;index++){
          if ($(".pagerow" + index)[0]) {
                    initTopList.push($(".pagerow" + index)[0].offsetTop); //到父元素的高度
          }
          // console.log($(".pagerow"+index )[0])
          //console.log(initTopList)
        }
        return {
          firstClassPageNum,
          lastClassPageNum,
          offsetList: initTopList,  
        };
    }
    let obj=computedStyle();
    function getPageNum(scrollTop,array){
      if(scrollTop>array[array.length-1]){
        return array.length;
      }
      for(let index=0;index<array.length;index++){
        const element=array[index];
        if(element>scrollTop){
          return index;
        }
      } 
    }
    $("#init-table-body").scroll(function(){
      let scrollTop=$(this).scrollTop()
      let pageNum=getPageNum(scrollTop,obj.offsetList)
      $("#number").text("第"+Number(pageNum)+"页")
    })


      



    </script>
  </body>
</html>
